<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page import="com.baizhi.entity.Title" %>
<%@ page import="com.baizhi.entity.User" %>
<%@ page import="java.text.SimpleDateFormat" %>
<%@ page import="java.util.Date" %>
<%@ page pageEncoding="UTF-8" contentType="text/html; UTF-8" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>Web Tech Template - Free CSS Layout</title>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <link href="css/templatemo_style.css" rel="stylesheet" type="text/css"/>

    <%--<script language="javascript" type="text/javascript">--%>
    <%--function clearText(field)--%>
    <%--{--%>
    <%--    if (field.defaultValue == field.value) field.value = '';--%>
    <%--    else if (field.value == '') field.value = field.defaultValue;--%>
    <%--}--%>
    <%--</script>--%>

    <script src="jquery.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<%
    User users = (User)session.getAttribute("u");
%>
<%
    Title title = (Title)request.getAttribute("title1");
    HttpSession session1 = request.getSession();
    session1.setAttribute("username",users.getName());
    session1.setAttribute("title",title.getTitle());
    System.out.println("页面得到标题"+title.getTitle());
    SimpleDateFormat sdf = new SimpleDateFormat("MM/dd  yyyy");
    String datetime =sdf.format(new Date());
    session1.setAttribute("date",datetime);

%>

<div id="templatemo_header">

    <div id="site_title">

        <a><%=title.getName()%>的文章</a>

    </div> <!-- end of site_title -->

    <!--   <div id="header_right">-->
    <!--    -->
    <!--    	<a href="#"><img src="images/templatemo_twitter.png" alt="twitter" /></a><a href="#"><img src="images/templatemo_rss.png" alt="rss" /></a>-->
    <!--        -->
    <!--        <div id="newsletter_box">-->
    <!--       	  <form action="#" method="get">-->
    <!--              <input type="text" id="user" name="user" class="newsletter_email" value="Enter your email address"  onfocus="clearText(this)" onblur="clearText(this)" />-->
    <!--            <input style="font-weight: bold;" type="submit" name="submit" id="submit" value="" />-->
    <!--            </form>-->
    <!--        </div>-->
    <!--    -->
    <!--   </div>-->

    <div class="cleaner"></div>

</div> <!-- end of header -->

<div id="templatemo_menu_wrapper">

    <div id="templatemo_menu">
        <ul>
            <li><a href="${pageContext.request.contextPath}/blog"
                   style="cursor:default"><span></span>首页</a></li>
            <li><a href="#"><span></span>关注</a></li>
            <li><a href="${pageContext.request.contextPath}/write_blog.jsp"><span></span>发表博客</a></li>
            <li><a href="#" class="current"><span></span>正文</a></li>
        </ul>
    </div>
</div> <!-- end of templatemo_menu -->


<div id="templatemo_main"><span class="tm_bottom"></span>

    <div id="templatemo_content">
        <%

        %>

        <div class="content_box">
            <h1 style="color: white"><%=title.getTitle()%></h1>
            <div class="tag"><strong>Tags:</strong><a href="#"><%=title.getKeyWord()%></a></div>
        </div>

        <div class="post_box">
                        <div class="header">
            <!--                <h2><a href="#">标题1</a></h2>-->
            <!--              <div class="tag"><strong>Tags:</strong> <a href="#">aaa</a>, <a href="#">bbb</a>, <a href="#">ccc</a></div>-->
                            <span class="posted_date">
                               <strong><%=title.getDate()%></strong>
                            </span>
                        </div>
                        <img src="images/toux.jpg" alt="image" />
            <div class="pb_right" style="float: none;width: auto">
                <p style=""><%=title.getText()%></p>
                <div class="like"><a href="#">赞(<%=title.getLikeCount()%>)</a></div>
                <!--                <div class="comment">评论()</div>-->
                <div style="float: right;margin-top: 15px;padding: 3px 0 0 25px;color:#da9d0c;">
                    <!-- <%--          将时间戳裁剪为年月日并显示  ————年份         --%> -->
                </div>
            </div>
            <div class="cleaner"></div>
        </div>
        <div style="padding: 10px">
            <p style="padding-bottom: 10px;font-size: initial">发表评论()</p>
            <div style="overflow:hidden;">
                <form action="${pageContext.request.contextPath}/commitSub" method="post">
                <textarea name="text" id="text" rows="30" cols="50" maxlength="100"
                          style="resize:none;margin: 0px;width: 600px;height: 93px;padding-left: 0px;padding-right: 0px;border-left-width: 0px;border-right-width: 0px;"></textarea>
                <button id="submit" type="submit" id="submit" value="发布"
                        style="margin-top:10px;width: 10%;float: right;height: 25px;background-color: transparent;border-color: #da9d0c;border-style: groove;color: darkgray">
                    发布
                </button>
                </form>
            </div>
            <div id="itemBox">
                <c:forEach items="${sessionScope.commits}" var="comments" varStatus="s">
                    <div id="commentArea"
                         style="margin-top: 50px;padding: 5px;overflow: hidden;border-width:1px; border-style:solid; border-color:#da9d0c;position: relative">

                        <div id="headPicture" style="float: left;vertical-align: middle;margin:10px 15px">
                            <div style="border-radius: 50%;background: url(./images/5copy.jpg);width: 50px;height: 50px">
                            </div>
                            <div style="text-align: center">
                                <p style="color: #da9d0c">${comments.name}</p>
                            </div>
                        </div>
                        <span style="word-wrap: break-word;">${comments.comment}</span>
                        <div style="display: block;width: 50%;height: 15px">
                            <p style="float: right;position:absolute;right: 10px;bottom: 3px;color: #da9d0c">
                                    ${comments.date}
                               </p>
                        </div>
                    </div>
                </c:forEach>
            </div>
        </div>
    </div>

    <div id="templatemo_sidebar">
        <div class="sidebar_box">
            <h3>Tag Cloud</h3>
            <div class="sb_content">
                <a href="#" style="font-size:12px">Aenean</a> <a href="#" style="font-size:11px">Cursus</a> <a href="#"
                                                                                                               style="font-size:16px">Maecenas</a>
                <a href="#" style="font-size:11px">Aliquam Ligula</a> <a href="#" style="font-size:20px">Egestas</a> <a
                    href="#" style="font-size:16px">Suscipit</a> <a href="#" style="font-size:12px">Sapien</a> <a
                    href="#" style="font-size:28px">Dignissim</a> <a href="#" style="font-size:14px">Vestibulum</a> <a
                    href="#" style="font-size:12px">Lorem</a> <a href="#" style="font-size:14px">Urnain</a> <a href="#"
                                                                                                               style="font-size:20px">Neque</a>
                <a href="#" style="font-size:12px">Aenean</a>
            </div>
        </div>

        <div class="sidebar_box">
            <h3>Categories</h3>
            <div class="sb_content">
                <ul class="sidebar_menu">
                    <li><a href="#">CSS Techniques</a></li>
                    <li><a href="#">Web Design Tips</a></li>
                    <li><a href="#">Best Wallpapers</a></li>
                    <li><a href="#">Free Fonts</a></li>
                    <li><a href="#">Photoshop Tutorials</a></li>
                    <li><a href="#">3D Animation Tutorials</a></li>
                </ul>
            </div>
        </div>

        <div class="sidebar_box">
            <h3>Archives</h3>
            <div class="sb_content">
                <ul class="sidebar_menu">
                    <li><a href="#">CSS Templates</a></li>
                    <li><a href="#">Web Design Ideas</a></li>
                    <li><a href="#">Free Wallpapers</a></li>
                    <li><a href="#">Free Pixel Fonts</a></li>
                    <li><a href="#">Illustrator Tutorials</a></li>
                    <li><a href="#">3D Character Tutorials</a></li>
                </ul>
            </div>
        </div>

    </div>

    <div class="cleaner"></div>
</div> <!-- end of main -->

<div id="templatmeo_bottom">
    <div class="bottom_box">
        <h5><span>Sed Necest</span> Suspendisse a nibh</h5>
        <p>Duis vitae velit sed dui malesuada dignissim. Donec mollis aliquet ligula. Maecenas adipiscing elementum
            ipsum.</p>
        <a href="#" class="continue">more info</a>
    </div>

    <div class="bottom_box">
        <h5><span>Lorem ipsum</span> dolor sit amet</h5>
        <p>Vestibulum eleifend, enim ut molestie pulvinar, purus est fringilla augue, ut tristique nunc neque a
            libero.</p>
        <a href="#" class="continue">more info</a>
    </div>

    <div class="bottom_box">
        <h5><span>Recent</span> Blog Post</h5>
        <ul class="bottom_box_list">
            <li><a href="#">Duis vitae velit sed lesuada dignissim.</a></li>
            <li><a href="#">Donec mollis aliquet ligula.</a></li>
            <li><a href="#">Maecenas adipiscing elementum ipsum.</a></li>
        </ul>
    </div>

</div> <!-- end of bottom -->

<div id="templatemo_footer">

    <ul class="footer_menu">
        <li class="first"><a href="#">Home</a></li>
        <li><a href="#">Web 2.0</a></li>
        <li><a href="#">Wordpress</a></li>
        <li><a href="#">Graphics</a></li>
        <li><a href="#">Inspirations</a></li>
        <li><a href="#">Freebies</a></li>
    </ul>

    Copyright © 2048 <a href="#">Your Company Name</a> <!-- Credit: www.templatemo.com -->|
    Validate <a href="http://validator.w3.org/check?uri=referer">XHTML</a> &amp; <a
        href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a>

</div>
<!-- templatemo 205 web tech -->
<!--
Web Tech Template
http://www.templatemo.com/preview/templatemo_205_web_tech
-->
<script>
    let subButton = $("#sub");
    let aid = null;
    let uid = null;
    let userName = null;
    let text = null;
    let date = null;
    let year = null;
    let month = null;
    let day = null;
    let str = null;
    let itemBox = $("#itemBox");

    subButton.click(function () {
        aid = "${article1.aid}";
        uid = "${all.user.userId}";
        userName = "${all.user.name}";
        text = $("#text").val();
        date = new Date();
        year = date.getFullYear();
        month = date.getMonth() + 1;
        day = date.getDate();
        str = year + "-" + month + "-" + day

        $.ajax({
            url: "/addCommentsServlet",
            type: "POST",
            async: false,
            datatype: "json",
            data: {
                "aid": aid,
                "uid": uid,
                "userName": userName,
                "text": text,
                "date": str
            },
            success(result) {
                window.location.href = "${pageContext.request.contextPath}/inToArticleServlet?aid=" +${article1.aid};
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                // alert(XMLHttpRequest.status);
                // alert(XMLHttpRequest.readyState);
                // alert(textStatus);
            },
        })
    })
</script>
</body>
</html>